<template>
  <el-calendar style="width:1000px;height:1200px;margin: 50px 0px 0px 300px;">
    <template #date-cell="{ data }">
      <el-row :class="data.isSelected ? 'is-selected' : 'sds'" @click="chufa(data.day)">
        <!-- {{ data.day.split('-').slice(1).join('-') }} -->
        {{ data.day.split('-').slice(2).toString() }}
        {{ data.isSelected ? '✔️' : '' }}
      </el-row>

      <div style="display: flex; align-items: center">
        <el-popover placement="right" :width="220" trigger="hover" @before-enter="yiOrji(data.day)">
          <template #reference>
            <el-button style="margin-right: 16px;opacity: 0"></el-button>
          </template>
          <el-table :data="state.yiOrjis" :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ 'text-align': 'center' }" :row-style='rowstyles'>
            <el-table-column width="100" property="yi" label="宜" />
            <el-table-column width="100" property="ji" label="忌"/>
          </el-table>
        </el-popover>
      </div>
      <div v-for="(item, index) in textContent(data.day)" :key="index" @click="chufa(data.day)">
        <e-row>
          <el-col class="center">
            <span style="color: #ed5565">{{ item.jrs }}</span>
          </el-col>
        </e-row>
      </div>
    </template>
  </el-calendar>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Solar, Lunar} from "lunar-javascript";

const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]

const state = reactive({
  tableData: [],
  //测试数据
  calendarData: [
    {
      day: "2023-01-01",
      jrs: "",
      yi: "",
      ji: ""
    },
    {
      day: "2023-01-04",
      jrs: "",
      yi: "",
      ji: ""
    },
    {
      day: "2023-01-21",
      jrs: "",
      yi: "",
      ji: ""
    },
    {
      day: "2023-01-26",
      jrs: "",
      yi: "",
      ji: ""
    },
  ],
  yiOrjis: [
    {
      yi: "",
      ji: ""
    }
  ],
  jrs: [{
    jr: ""
  }]
});


/*   //处理日期获取后台数据动态渲染上去
    const textContent = (date) => {
      
        return state.calendarData.filter((item) => {
            //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
            var d = Solar.fromDate(new Date(date));

            const year = d.getYear()
            const month = d.getMonth()
            const day = d.getDay();
            let solar = Solar.fromYmd(year,month,day);
            //console.log(solar.toFullString());
            //console.log(solar.getLunar().toFullString());
            //console.log(jrs)
            
          if(date == item.day){
            console.log(solar.getFestivals().length)
            const jrs = solar.getFestivals().length > 0? solar.getFestivals().join(","):solar.getOtherFestivals().join(",")
            console.log(date,solar.getFestivals())
            item.jrs = jrs
          }
          return date === item.day;
          //return true;
        });
      }; */

//处理日期获取后台数据动态渲染上去
const textContent = (date) => {
  //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
  var d = Solar.fromDate(new Date(date));

  const year = d.getYear()
  const month = d.getMonth()
  const day = d.getDay();
  let solar = Solar.fromYmd(year, month, day);

  console.log(solar.toFullString());
  console.log(solar.getLunar().toFullString());

  let jrs = null;
  if (solar.getFestivals().length > 0 ){
    jrs = solar.getFestivals().toString()
  }else {
    if (solar.getOtherFestivals().length > 0 ){
      jrs = solar.getOtherFestivals()[0].toString().substr(0,7)
    }
  }

  if (jrs != null) {
    console.log(jrs)
    const newJ = {day: "", jrs: "",yi:"",ji:""}
    newJ.day = date
    newJ.jrs = jrs

    let newArr = state.calendarData.filter(every => {
      return every.day !== newJ.day
    })
    newArr.push(newJ)
    return JSON.parse(JSON.stringify(newArr))
  }



};

function chufa(day) {
  console.log("我被触发了", day)
}

function yiOrji(day) {
  var dd = Lunar.fromDate(new Date(day));
  // 宜
  var y = dd.getDayYi();

  const yString = y.join(",")
  state.yiOrjis[0].yi = yString;
  //console.log("宜",yString);

  // 忌
  const j = dd.getDayJi();
  const jString = j.join(",")
  state.yiOrjis[0].ji = jString;
  //console.log("忌",jString);
}

function rowstyles({ row,rowIndex }){
  console.log('ssssss',rowIndex)
  if (rowIndex) {
    let styleJson = {
      backgroundColor: 'pink'
    };
    return styleJson
  }
}


</script>

<style scoped>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>